import { CopyOutlined } from "@ant-design/icons"
import styled from "styled-components"

import { Toast } from "@/components/messages"
import { useLocale } from "@/locales"

import { CopyProps } from "./types"

const Wrapper = styled.div`
	cursor: pointer;
`

const Link = styled.span`
	color: #52c1f5;
	&:hover {
		text-decoration: underline;
	}
`

const Copy = ({ text, isLink = false, onClick }: CopyProps) => {
	const { newFormat } = useLocale()

	const handleWrapperClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
		onClick ? undefined : handleCopy(e)
	}

	const handleCopy = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
		e.stopPropagation()
		e.preventDefault()
		navigator.clipboard.writeText(String(text))
		Toast.info(newFormat("common.copy"))
	}

	return (
		<Wrapper onClick={handleWrapperClick}>
			{isLink ? <Link onClick={onClick}>{text} </Link> : <span>{text} </span>}
			<span onClick={handleCopy}>
				<CopyOutlined />
			</span>
		</Wrapper>
	)
}

export default Copy
